<template>
	<!-- 推荐管理 -->
	<div id="tops">
		<div class="Box">
			<el-scrollbar>
				<div class="filter-container">
					<div class="filter-item">
						<el-select v-model="value" placeholder="请选择" clearable>
							<el-option v-for="item in arr" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</div>
					<div>
						<el-button type="primary" icon="el-icon-search" v-insert="['promote:recommend:query']">查找</el-button>
						<el-button type="primary" @click="(dialogFormVisible = true),(ruleForm ={})" icon="el-icon-edit" v-insert="['promote:recommend:create']">添加</el-button>
					</div>
					<!-- 弹窗 -->
					<el-dialog title="创建" :visible.sync="dialogFormVisible" class="on" v-if="dialogFormVisible">
						<el-form :model="ruleForm" :rules="rules" status-icon ref="ruleForm" label-width="100px">
							<el-form-item label="推荐类型" :label-width="formLabelWidth" required prop="recommendType">
								<el-select v-model="ruleForm.recommendType" placeholder="请选择">
									<el-option v-for="item in arr" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="推荐商品" :label-width="formLabelWidth" prop="oValue">
								<el-cascader v-model="ruleForm.oValue" :options="options" @change="handleChange1">
								</el-cascader>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="cancel()">取 消</el-button>
							<el-button type="primary" @click="demil('ruleForm')">确 定</el-button>
						</div>
					</el-dialog>
				</div>
				<div>
					<el-main class="Main">
						<el-table :data="tableData" border style="width: 100%" empty-text="暂无数据" size="mini" v-loading="loading"
						 element-loading-text="玩命加载中···">
							<el-table-column prop="id" label="推荐ID" align="center" sortable>
							</el-table-column>
							<el-table-column prop="spuTitle" label="推荐商品" align="center">
							</el-table-column>
							<el-table-column prop="recommendType" label="推荐类型" align="center">
								<template slot-scope="scope">
									<el-tag type="primary" plain>{{ scope.row.recommendType == 1 ? "橱窗推荐" : null }}</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="操作" align="center">
								<template slot-scope="scope">
									<el-button type="danger" @click="del(scope.row)" size="small" v-insert="['promote:advertisement:delete']">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-main>
				</div>
				<el-container>
					<el-header class="buttom">
						<div class="block">
							<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40,50,100]"
							 :page-size="count" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
							</el-pagination>
						</div>
					</el-header>
				</el-container>
			</el-scrollbar>
		</div>
	</div>
</template>

<script>
	import {
		Recomlist,
		Recompdate,
		Recomtree,
		Recomdel
	} from '../../api/recommanage.js'
	export default {
		data() {
			var checkAge = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('推荐商品不能为空'))
				} else {
					callback()
				}
			}
			var validatePass = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('推荐类型不能为空'))
				} else {
					callback()
				}
			}
			return {
				loading: true,
				tableData: [],
				count: 20,
				totalCount: 1,
				dialogFormVisible: false,
				opaer: [],
				pageNo: 1,
				arr: [{
					value: 1,
					label: '橱窗推荐'
				}, {
					value: '',
					label: '全部'
				}],
				value: '',
				options: [],
				formLabelWidth: '120px',
				ruleForm: {
					oValue: '',
					recommendType: ''
				},
				rules: {
					oValue: [{
						// recommendType is required
						required: true,
						validator: checkAge,
						trigger: 'blur'
					}],
					recommendType: [{
						required: true,
						validator: validatePass,
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			// 删除
			del(row) {
				this.$confirm(`此操作将永久删除该用户---'${row.spuTitle}'---是否继续?', '提示`, {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						console.log(row)
						const fromdef = {
							recommendType: row.recommendType,
							id: row.id
						}
						console.log(row.recommendType)
						Recomdel(fromdef).then((resspose) => {
							console.log(resspose)
							if (resspose.data.errmsg == '成功') {
								this.liste()
								this.$message({
									type: 'success',
									message: '删除成功'
								})
							} else {
								this.$message.error({
									type: 'info',
									message: resspose.data.errmsg
								})
							}
						})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						})
					})
			},
			cancel() { // 弹框取消提示
				this.$confirm('是否取消？')
					.then(_ => {
						this.liste()
						this.dialogFormVisible = false
					})
			},
			// 确定添加
			demil(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						const fromsaq = {
							recommendType: this.ruleForm.recommendType,
							spuId: this.ruleForm.oValue[3]
						}
						Recompdate(fromsaq).then((resspose) => {
							console.log(resspose)
							if (resspose.data.errmsg == '成功') {
								this.$message({
									type: 'success',
									message: '添加成功!'
								})
								this.dialogFormVisible = false
								this.liste()
							} else {
								this.$message.error({
									type: 'info',
									message: resspose.data.errmsg
								})
							}
						})
					}
				})
			},
			// 查询列表
			liste() {
				const params = {
					recommendType: this.value,
					pageNo: this.pageNo,
					limit: this.count
				}
				Recomlist(params).then((resspose) => {
					if (resspose.data.errmsg == '成功') {
						this.loading = false
						this.tableData = resspose.data.data.items
						this.totalCount = resspose.data.data.total
						this.count = resspose.data.data.pageSize
					} else {
						setTimeout(() => {
							this.loading = false
						}, 5000)
					}
				})
			},
			// spu树
			list() {
				Recomtree().then((resspose) => {
					this.options = this.renderTreeNodes(resspose.data.data)
					console.log(resspose, '7896789789')
				})
			},
			renderTreeNodes(datas) {
				const data = []
				datas.map((item) => {
					if (item.children.length > 0) {
						const dadax = {
							id: item.id,
							label: item.label,
							value: item.id,
							children: this.renderTreeNodes(item.children)
						}
						data.push(dadax)
					} else {
						const dadax = {
							id: item.id,
							label: item.label,
							value: item.id
						}
						data.push(dadax)
					}
					return data
				})
				return data
			},

			handleChange1(value) {
				console.log(value)
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`)
				this.count = val
				this.liste()
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`)
				this.pageNo = val
				this.liste()
			}
		},
		created() {
			this.liste()
			this.list()
		}
	}
</script>

<style lang="less" scoped="scoped">
	// 头部
	#tops {
		width: 100%;
		overflow: hidden;
		// background-color: pink;
	}

	// 头部
	.Box {
		width: 100%;
		overflow: hidden;
		// height: 900px;
	}

	// 中间
	.el-main {
		// background-color: #E9EEF3;
		color: #333;
		text-align: center;
		width: 100%;
		overflow: hidden;
		overflow-x: auto;
	}

	.el-scrollbar__wrap {
		height: 103% !important;
	}

	.filter-container {
		width: 100%;
		height: 54px;
		line-height: 60px;
	}

	.filter-item {
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 10px;
		margin-right: 4px;
		float: left;
	}

	.el-input {
		width: 200px !important;
		padding-left: 4px !important;
	}

	.el-pagination {
		padding: 24px 10px !important;
	}

	// 底部
	.buttom {
		// background-color: #B3C0D1;
		color: #333;
		// text-align: center;
		width: 100%;
		height: 130px !important;
	}

	// 分页
	.block {
		margin-top: 10px;
	}
</style>
